<template>
  <div class="home">
    <div>
      <div>请选择数据工厂</div>
      <el-select
        @change="factoryChange"
        style="margin-left: 10px"
        v-model="factory"
        placeholder="请选择工厂"
      >
        <el-option v-for="item in factoryList" :key="item" :label="item" :value="item">
        </el-option>
      </el-select>
    </div>
    <div>
      <div>
        <img src="../../assets/img/home-1.png" />
        <label>{{ data1.allNum }}</label>
        <label>{{ $t("route.device_number") }}</label>
        <!-- <el-button @click="jumpPage(0)" :plain="true">{{
          $t("route.Device_List")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-5.png" />
        <label>{{ data1.onlineNum }}</label>
        <label>{{ $t("route.Number_of_online") }}</label>
        <!-- <el-button @click="jumpPage(0)" :plain="true">{{
          $t("route.Device_List")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-5.png" />
        <label>{{ data1.offlineNum }}</label>
        <label>{{ $t("route.Number_of_offline") }}</label>
        <!-- <el-button @click="jumpPage(0)" :plain="true">{{
          $t("route.Device_List")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-5.png" />
        <label>{{ data1.powerOnNum }}</label>
        <label> 开机数量</label>
        <!-- <el-button @click="jumpPage(0)" :plain="true">{{
          $t("route.Device_List")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-6.png" />
        <label>{{ data1.powerOffNum }}</label>
        <label>关机数量</label>
        <!-- <el-button @click="jumpPage(0)" :plain="true">{{
          $t("route.Device_List")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-2.png" />
        <label>{{ data1.onlinePowerOnNum }}</label>
        <label>在线未开机</label>
        <!-- <el-button @click="jumpPage(1)" :plain="true">{{
          $t("route.Power_energy_consumption_management")
        }}</el-button> -->
      </div>
      <div>
        <img src="../../assets/img/home-3.png" />
        <label>{{ data1.abnormalCount }}</label>
        <label>{{ $t("route.Number_of_exceptions") }}</label>
        <!-- <el-button @click="jumpPage(4)" :plain="true">{{
          $t("route.Abnormal_device")
        }}</el-button> -->
      </div>
      <!-- <div>
        <img src="../../assets/img/home-2.png" />
        <label>{{ crtMonthElect.toFixed(2) }}{{ $t("route.degree") }}</label>
        <label>{{ $t("route.Energy_consumption_of_the_month") }}</label>
        <el-button @click="jumpPage(1)" :plain="true">{{
          $t("route.Power_energy_consumption_management")
        }}</el-button>
      </div> -->
    </div>

    <div>
      <div>
        <div v-if="chartShow" id="echart-2" style="height: 250px; width: 100%"></div>
        <div class="flex-row">
          <el-date-picker
            v-model="query2.dateRange"
            type="daterange"
            range-separator="-"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
            @change="dateRangeChange"
          />
          <el-cascader class="mgr-left-10" :options="options" @change="proLineChange2" />
        </div>
      </div>

      <div v-if="false">
        <div>
          <div v-if="chartShow" id="echart-3" style="height: 250px; width: 100%"></div>
        </div>
        <div>
          <div v-if="chartShow" id="echart-4" style="height: 250px; width: 100%"></div>
        </div>
      </div>
    </div>

    <div>
      <div v-if="chartShow" id="echart-1" style="height: 250px; width: 100%"></div>
      <div>
        <el-cascader
          :placeholder="$t('route.Please_select_a_group')"
          v-model="query1.proLineOption"
          :options="options"
          @change="proLineChange1"
        />
        <el-select
          class="mgr-left-10"
          v-model="query1.store"
          @change="storeChange1"
          :placeholder="$t('route.Please_select_a_warehouse')"
        >
          <el-option v-for="item in storeOptions" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import http from "../../js/http/http.js";
import api from "../../js/http/api.js";
import CommonUtils from "../../js/common/common-utils.js";
import * as echarts from "echarts";
import i18n from "../../i18n/index";
import DateUtils from "../../js/common/date-utils.js";
import Constant from "../../js/common/constant.js";
export default {
  data() {
    return {
      data1: {},
      crtMonthElect: 0,
      workshopDeviceRate: 0,
      query1: {
        workshop: null,
        proLine: null,
        store: null,
        proLineOption: [],
      },
      query2: {
        workshop: null,
        proLine: null,
        dateRange: [DateUtils.getDifferDay(-30), new Date().format("yyyy-MM-dd")],
      },
      customerList: [],
      dialogVisible: false,
      customer: {},
      dialogTitle: i18n.global.t("route.Add_Customer"),
      total: 10,
      chartShow: false,
      options: [],
      storeOptions: [],
      factoryList: [],
      factory: Constant.FACTORY,
    };
  },
  methods: {
    factoryChange() {
      Constant.FACTORY = this.factory;
      this.getHomeData1();
      this.getAvgUseEffList();
      this.getAllKindDeviceCount();
    },
    jumpPage(type) {
      if (type == 0) {
        this.$router.push("/device-list");
      } else if (type == 1) {
        this.$router.push("/electric-monitor");
      } else if (type == 2) {
        this.$router.push("/arrange-order");
      } else if (type == 3) {
        this.$router.push("/user-list");
      } else if (type == 4) {
        this.$router.push("/abnormal-device");
      }
    },
    dateRangeChange() {
      this.getAvgUseEffList();
    },
    getHomeData1() {
      http.post(
        api.GET_HOME_DATA1,
        {
          adminId: this.$store.state.user.id,
          factory: this.factory == "全部工厂" ? null : this.factory,
        },
        (data) => {
          this.data1 = data.data;
        }
      );
    },
    getCrtMonthElect() {
      http.post(
        api.GET_CRT_MONTH_ELECT,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.crtMonthElect = data.data;
        }
      );
    },
    getWorkshopDeviceRate() {
      http.post(
        api.GET_WORKSHOP_DEVICE_RATE,
        {
          adminId: this.$store.state.user.id,
          factory: this.factory == "全部工厂" ? null : this.factory,
        },
        (data) => {
          this.workshopDeviceRate = data.data;
        }
      );
    },
    getAllKindDeviceCount() {
      http.post(
        api.GET_ALL_KIND_DEVICE_COUNT,
        {
          adminId: this.$store.state.user.id,
          factory: this.factory == "全部工厂" ? null : this.factory,

          workshop:
            this.query1.workshop == i18n.global.t("route.All_workshops")
              ? null
              : this.query1.workshop,
          proLine:
            this.query1.proLine == i18n.global.t("route.All_groups")
              ? null
              : this.query1.proLine,
          store:
            this.query1.store == i18n.global.t("route.All_warehouses")
              ? null
              : this.query1.store,
        },
        (data) => {
          var xData = [];
          var yData = [];
          for (var item of data.data) {
            xData.push(item.kind);
            yData.push(item.count);
          }
          this.initEchart1(xData, yData);
        }
      );
    },
    getDeviceOnlineReport() {
      http.post(
        api.GET_DEVICE_ONLINE_REPORT,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          var reportDara = [];
          reportDara.push({
            value: data.data.onlineCount,
            name: i18n.global.t("route.Startup"),
          });
          reportDara.push({
            value: data.data.offlineCount,
            name: i18n.global.t("route.Shutdown"),
          });
          this.initEchart3(reportDara);
        }
      );
    },
    getAvgUseEffList() {
      http.post(
        api.GET_AVG_USE_EFF_LIST,
        {
          adminId: this.$store.state.user.id,
          factory: this.factory == "全部工厂" ? null : this.factory,

          workshop:
            this.query2.workshop == i18n.global.t("route.All_workshops")
              ? null
              : this.query2.workshop,
          proLine:
            this.query2.proLine == i18n.global.t("route.All_groups")
              ? null
              : this.query2.proLine,
          startTime: this.query2.dateRange[0],
          endTime: this.query2.dateRange[1],
        },
        (data) => {
          var xData = [];
          var yData = [];
          for (var item of data.data) {
            xData.unshift(item.createTime.substring(5, 10));
            yData.unshift(
              item.bootUpDur ? ((item.workDur * 100) / item.bootUpDur).toFixed(2) : 0
            );
          }
          this.initEchart2(xData, yData);
        }
      );
    },
    initEchart1(xData, yData) {
      var myChart = echarts.init(document.getElementById("echart-1"));
      var option = CommonUtils.initBarOption(
        i18n.global.t("route.Proportion_of_various_equipment"),
        xData,
        yData
      );
      myChart.setOption(option);
      myChart.on("click", (params) => {
        console.log(params);
        this.$router.push({
          name: "device-list",
          params: {
            kind: params.name,
          },
        });
      });
    },
    initEchart2(xData, yData) {
      var myChart = echarts.init(document.getElementById("echart-2"));
      var option = CommonUtils.initBarOption(
        i18n.global.t("route.Comprehensive_crop_growth_rate"),
        xData,
        yData
      );
      option.series[0].realtimeSort = false;
      myChart.setOption(option);
    },

    initEchart3(data) {
      var myChart = echarts.init(document.getElementById("echart-3"));
      var option = CommonUtils.initRingOption(
        i18n.global.t("route.Startup_of_workshop_equipment"),
        i18n.global.t("route.Startup_situation"),
        data,
        ["#66FF33", "#999999"]
      );
      myChart.setOption(option);
    },

    initEchart4(data) {
      var myChart = echarts.init(document.getElementById("echart-4"));
      var option = CommonUtils.initRingOption(
        i18n.global.t("route.Abnormal_conditions_of_workshop_equipment"),
        i18n.global.t("route.Abnormal_conditions"),
        data,
        ["#66FF33", "#FF0000"]
      );
      myChart.setOption(option);
    },
    getPorLineRow() {
      http.post(
        api.GET_POR_LINE_ROW,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          for (var item of data.data) {
            var children = item.children;
            children.unshift({
              value: i18n.global.t("route.All_groups"),
              label: i18n.global.t("route.All_groups"),
            });
          }
          this.options = data.data;
          this.options.unshift({
            value: i18n.global.t("route.All_workshops"),
            label: i18n.global.t("route.All_workshops"),
          });
        }
      );
    },
    getAllStore() {
      http.post(
        api.GET_ALL_STORE2,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.storeOptions = data.data;
          this.storeOptions.unshift(i18n.global.t("route.All_warehouses"));
        }
      );
    },
    proLineChange2(value) {
      this.query2.workshop = value[0];
      this.query2.proLine = value[1];
      this.getAvgUseEffList();
    },
    proLineChange1(value) {
      this.query1.workshop = value[0];
      this.query1.proLine = value[1];
      this.query1.store = "";
      this.getAllKindDeviceCount();
    },
    storeChange1(value) {
      this.query1.workshop = "";
      this.query1.proLine = "";
      this.query1.proLineOption = [];
      this.query1.store = value;
      this.getAllKindDeviceCount();
    },
    getAllFactory() {
      http.post(
        api.GET_ALL_FACTORY,
        {
          adminId: this.$store.state.user.id,
        },
        (data) => {
          this.factoryList.push("全部工厂");
          for (var item of data.data) {
            this.factoryList.push(item.name);
          }
        }
      );
    },
  },
  created() {
    this.chartShow = true;
    this.getHomeData1();
    this.getWorkshopDeviceRate();
    this.getAllKindDeviceCount();
    this.getAvgUseEffList();
    this.getCrtMonthElect();
    this.getPorLineRow();
    this.getAllStore();
    this.getAllFactory();
  },
  destroyed() {
    this.chartShow = false;
  },
};
</script>

<style lang="scss" scoped>
.centren {
  width: 100%;
  // width: 100vw;
  // display: flex;
  // justify-content: center;
}
.home {
  color: #444444;
  font-size: 18px;
  padding-right: 20px;
  height: calc(100vh - 100px);
  // overflow: scroll;
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;

  > div:nth-of-type(1) {
    display: flex;
    align-items: center;
    // justify-content: space-between;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
  }
  > div:nth-of-type(2) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;

    > div {
      // flex: 1;
      // margin: 0px 50px;
      width: 110px;
      // min-width: 100px;
      background-color: #ffffff;
      padding: 20px;
      border: 2px solid #eeeeee;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;

      > img:nth-of-type(1) {
        width: 60px;
        height: 60px;
      }

      > label:nth-of-type(1) {
        margin-top: 5px;
        font-size: 25px;
        color: #000000;
      }

      > label:nth-of-type(2) {
        font-size: 16px;
        color: #333333;
      }

      > button:nth-of-type(1) {
        margin-top: 5px;
        color: #a866ff;
        padding: 2px 20px;
      }
    }
  }

  > div:nth-of-type(4) {
    align-items: center;
    margin-top: 20px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 5px;
    position: relative;

    > div:nth-of-type(2) {
      position: absolute;
      right: 30px;
      top: 20px;
    }
  }
  > div:nth-of-type(3) {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;

    > div {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 5px;
      flex: 1;
      position: relative;
    }

    > div:nth-of-type(1) {
      margin-right: 10px;

      > div:nth-of-type(2) {
        position: absolute;
        right: 30px;
        top: 20px;
      }
    }
    > div:nth-of-type(2) {
      margin-left: 10px;
      display: flex;
      flex-direction: row;

      > div:nth-of-type(1) {
        flex: 1;
      }

      > div:nth-of-type(2) {
        flex: 1;
      }
    }
  }
}
</style>
